<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    :width="700"
    :append-to-body="false"
    @close="handleClose"
    custom-class="center-detail"
  >
    <div class="resource-detail-body">
      <div class="row">
        <div class="label">资源名称：</div>
        <div class="content">{{ props.resource.fileResName }}</div>
      </div>
      <div class="row">
        <div class="label">数据格式：</div>
        <div class="content">{{ getFileTypeName(props.resource.fileType) }}</div>
      </div>
      <div class="row">
        <div class="label">资源描述：</div>
        <div class="content">
          {{ props.resource.matDesp || '无' }}
        </div>
      </div>
      <div class="row">
        <div class="label">创建时间：</div>
        <div class="content">
          {{ dayjs(props.resource.uploadTime).format('YYYY-MM-DD HH:mm:ss') }}
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { IResource } from '@/api/resource/types';
import { dayjs } from 'element-plus';
import { ResourceFileType } from '@/views/enum/common';

defineOptions({
  name: '',
});

interface IProps {
  resource: IResource;
}

const props = withDefaults(defineProps<IProps>(), {
  resource: () => ({} as IResource),
});
const emit = defineEmits(['handleClose']);
const fileTypeEnum = {
  osgb: 'osgb',
  shp: 'shp',
  kml: 'kml',
  geojson: 'geojson',
  _3dtiles: '3dtiles',
  '6': '6',
  gltf: 'gltf',
  tif_dem: 'tif-dem',
  tif_dom: 'tif-dom',
} as any;

const dialogVisible = ref<boolean>(true);
const dialogTitle = ref<string>('资源详情');
const handleClose = () => {
  emit('handleClose');
};

function getFileTypeName(fileType: string) {
  if (!fileType) return '';
  let type = fileTypeEnum[fileType];
  let typeName = '';
  if (type) {
    typeName = (ResourceFileType as any)[type].value;
  }
  return typeName;
}
</script>

<style lang="less" scoped>
.resource-detail-body {
  padding-left: 10px;

  .row {
    display: flex;
    margin-top: 42px;

    .label {
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #585858;
      width: 90px;
      height: 22px;
      line-height: 22px;
    }

    .content {
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #161616;
    }
  }

  .row:first-child {
    margin-top: 0;
  }
}
</style>
